<!--
 * @Descripttion: 图标选择器组件
 * @version: 1.4
 * @Author: sakuya
 * @Date: 2021年7月27日10:02:46
 * @LastEditors: sakuya
 * @LastEditTime: 2022年5月14日19:49:42
-->

<template>
  <div class="sc-icon-select">
    <el-input v-model="defaultValue" :prefix-icon="defaultValue||'none'" :placeholder="placeholder" :clearable="clearable" :disabled="disabled">
      <template #append><el-button icon="el-icon-more-filled" @click="open"></el-button></template>
    </el-input>
    <el-dialog title="图标选择器" v-model="dialogVisible" :width="780" destroy-on-close>
      <el-tabs style="margin-top: -30px;">
        <el-tab-pane  v-for="item in data" :key="item.name" lazy>
          <template #label>
            {{item.name}} <el-tag size="small" type="info">{{item.icons.length}}</el-tag>
          </template>
          <div class="sc-icon-select__list">
            <el-scrollbar>
              <ul @click="selectIcon">
                <li v-for="icon in item.icons" :key="icon">
                  <span :data-icon="icon"></span>
                  <el-icon><component :is="icon" /></el-icon>
                </li>
              </ul>
            </el-scrollbar>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
  import config from "@/config/iconSelect"

  export default {
    props: {
      modelValue: { type: String, default: "" },
      placeholder: { type: String, default: "请输入或者选择图标" },
      clearable: { type: Boolean, default: false },
      disabled: { type: Boolean, default: false },
    },
    data() {
      return {
        defaultValue: '',
        dialogVisible: false,
        data: []
      }
    },
    watch:{
      modelValue(val){
        this.defaultValue = val
      },
      defaultValue(val){
        this.$emit('update:modelValue', val)
      }
    },
    mounted() {
      this.defaultValue = this.modelValue
      this.data.push(...config.icons)
    },
    methods: {
      open(){
        if(this.disabled){
          return false
        }
        this.dialogVisible = true
      },
      selectIcon(e){
        if(e.target.tagName != 'SPAN'){
          return false
        }
        this.defaultValue = e.target.dataset.icon
        this.dialogVisible = false
        this.$emit('update:modelValue', this.defaultValue);
      }
    }
  }
</script>

<style scoped>
  .sc-icon-select {display: inline-block;}
  .sc-icon-select__list {height:360px;overflow: auto;}
  .sc-icon-select__list ul {}
  .sc-icon-select__list li {display: inline-block;width:80px;height:80px;margin:5px;vertical-align: top;box-shadow: 0 0 0 1px #eee;transition: all 0.1s;border-radius: 4px;position: relative;}
  .sc-icon-select__list li span {position: absolute;top:0;left:0;right:0;bottom:0;z-index: 1;cursor: pointer;}
  .sc-icon-select__list li i {display: inline-block;width: 100%;height:100%;font-size: 26px;color: #6d7882;background: #fff;display: flex;justify-content: center;align-items: center;border-radius: 4px;}
  .sc-icon-select__list li:hover {box-shadow: 0 0 1px 4px rgba(64,158,255,1);}
  .sc-icon-select__list li:hover i {color: #409EFF;}

  .dark .sc-icon-select__list li {box-shadow: 0 0 0 1px #333;;}
  .dark .sc-icon-select__list li:hover {box-shadow: 0 0 1px 4px rgba(64,158,255,1);}
  .dark .sc-icon-select__list li i {background: var(--el-bg-color);}
</style>